import React, { Component } from 'react'

import { observer, inject } from 'mobx-react'
import { runInAction } from 'mobx' 
import styles from './ArticleCreate.less'
import E from 'wangeditor'

@inject("articleCreate")
@observer
class SecondStepView extends Component {
	constructor(props) {
		super(props) 
		this.articleCreate = this.props.articleCreate
		if(this.articleCreate.fuhtml) {
			this.fuhtml = this.articleCreate.fuhtml
		}
	}

	componentDidMount() {	
 		this.editor = new E('#header', '#content')
		this.editor.customConfig.onchange = (html) =>  {
        // 监控变化，同步更新到 textarea
      runInAction(() => {
      	this.articleCreate.fuhtml = html
      })
    }
		this.editor.create()
  }

	render() {
		return (
			<div>
				<div id="header" className={styles.header}></div>
				<div id="content" className={styles.content}>
					<div dangerouslySetInnerHTML={{__html: this.fuhtml}} />
				</div>
			</div>
		)
	}
}


export default SecondStepView